<template>
	<div class="mybox">
		<div class="top_header">
			<img :src="url" class="use_img">
			<div class="nickname">{{NickName}}</div>
			<div class="point">{{PointName}}:{{Point}}</div>
		</div>
		<div class="nav_box">
			<div class="title">我的订单</div>
			<div class="skip" @click='GoOrderList(0)'>查看全部订单></div>
			<div class="nav_list">
				<div class="nav_title" @click='GoOrderList(1)'>
					<img class="nav_img" src="../../assets/icon/daizhifu@2x.png">
					<div class="nav_text">待支付</div>
				</div>
				<div class="nav_title" @click='GoOrderList(2)'>
					<img class="nav_img" src="../../assets/icon/daifahuo@2x.png">
					<div class="nav_text">待发货</div>
				</div>
				<div class="nav_title" @click='GoOrderList(3)'>
					<img class="nav_img" src="../../assets/icon/daishouhuo@2x.png">
					<div class="nav_text">待收货</div>
				</div>
				<div class="nav_title" @click='GoOrderList(4)'>
					<img class="nav_img" src="../../assets/icon/yiwanjie@2x.png">
					<div class="nav_text">已完成</div>
				</div>
				<div class="nav_title" @click='Sealed'>
					<img class="nav_img" src="../../assets/icon/shouhou@2x.png">
					<div class="nav_text">售后单</div>
				</div>
			</div>
		</div>
		<div class="btn_list border_top">
			<div class="btn_box" @click='Coupon'>
				<div class="title margin_left">优惠劵</div>
				<div class="skip">></div>
			</div>
		</div>
		<div class="btn_list">
			<div class="btn_box" @click='FootMark'>
				<div class="title margin_left">收藏足迹</div>
				<div class="skip">></div>
			</div>
		</div>
		<div class="btn_list">
			<div class="btn_box" @click='Withdraw'>
				<div class="title margin_left">我的余额</div>
				<div class="skip">充值、提现等 ></div>
			</div>
		</div>
		<div class="btn_list margin_bottom" style="border-bottom:1px solid #c8c7cc;">
			<div class="btn_box bottom_none" @click='Exit'>
				<div class="title margin_left">退出登录</div>
				<div class="skip">></div>
			</div>
		</div>
	</div>
</template>

<script>
import { Indicator,MessageBox } from 'mint-ui'
export default {
	name: 'my',
	data () {
		 return {
			NickName:'',
			Point: 0,
			PointName: '',
			url:""
		}
	},
	created: function () {
		Indicator.open()
		const that = this
		that.$http('/user/user/getmyuserinfo',{},function(res){
			Indicator.close()
			if(res.Result){
				that.NickName = res.Data.NickName
				that.Point = res.Data.Point
				that.PointName = res.Data.PointName
				that.url = "https://api2.nahuo.com/v3/shop/logo/uid/" + res.Data.UserID
			}
		},'GET')
	},
	methods: {
		GoOrderList: function(id){
			this.$router.push({ path: '/order',query:{id:id}})
		},
		Sealed: function(){
			this.$router.push({ path: '/sealed'})
		},
		Coupon: function(){
			this.$router.push({ path: '/coupon'})
		},
		FootMark: function(){
			this.$router.push({ path: '/footmark'})
		},
		Withdraw: function(){
			this.$router.push({ path: '/withdraw'})
		},
		Exit: function(){
			MessageBox({
                title:'提示',
                message: '确定要退出吗？',
                showCancelButton: true,
            }).then( tt => {
                if(tt == 'confirm'){
                    localStorage.removeItem("token")
                    this.$router.push({ path: '/login/login'})
                }
            })
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.mybox{width: 100%;position: relative;top: 0;bottom: 49px;background-color:#efeff4;position: fixed;overflow-y: scroll;max-width: 720px;}
	.top_header{width: 100%;height: 150px;background: url(../../assets/footer/mybg.jpg) no-repeat;background-size: cover;padding-top: 20px;display: flex;align-items: center;flex-direction: column;}
	.use_img{width: 64px;height: 64px;border-radius: 100%;display: inline-block;margin-top: 14px;}
	.nickname{font-size: 18px;color: #fff;padding-top: 10px;}
	.point{font-size: 14px;color: #fff;padding: 5px 0;}
	.nav_box{width: 100%;margin: 10px 0;border-top:1px solid #c8c7cc;border-bottom:1px solid #c8c7cc;overflow: hidden;background-color: #fff;}
	.title{float: left;margin-left: 4%;height: 44px;line-height: 44px;color: #000;font-size: 14px;}
	.skip{float: right;margin-right: 4%;color: #ababab;height: 44px;line-height: 44px;font-size: 14px;}
	.nav_list{float: left;width: 96%;margin-left: 4%;height: 60px;border-top: 1px solid #c8c7cc;padding-top: 10px;padding-bottom: 10px;background-color: #fff;}
	.nav_title{float: left;width: 20%;height: 60px;font-size: 12px;text-align: center;color: #555;}
	.nav_img{display: block;margin: 3px auto;width: 32px;height: 32px;}
	.btn_list{width: 100%;height: 45px;line-height: 45px;background: #fff;}
	.btn_box{width:96%;margin-left:4%;height:44px;border-bottom:1px solid #c8c7cc;overflow:hidden;}
	.border_top{border-top:1px solid #c8c7cc;}.
	.border_bottom{border-bottom:1px solid #c8c7cc;}
	.margin_bottom{margin-bottom: 10px;}
	.bottom_none{border-bottom: none;}
	.margin_left{margin-left: 0;}
</style>
